Banque de code HTML

Ci-dessous, plusieurs morceaux de code à réutiliser : structure, boutons, cartes, tableaux, formulaires, layout, modal…

1. Structure HTML minimale

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Titre de la page</title>
</head>
<body>
  <h1>Bonjour monde</h1>
</body>
</html>

2. Boutons

Exemples de boutons réutilisables :

<button class="btn btn-primary">Bouton principal</button>
<button class="btn btn-secondary">Bouton secondaire</button>
<button class="btn btn-danger">Bouton danger</button>

3. Cartes (cards)

Exemples de petites cartes pour présenter du contenu :

Carte 1

Texte de présentation rapide. Idéal pour un produit, un article, un projet.

Carte 2

Un autre exemple de carte avec du contenu différent.

Carte 3

Tu peux dupliquer cette structure autant de fois que tu veux.

<div class="card">
  <h3>Titre de la carte</h3>
  <p>Texte de la carte.</p>
  <button class="btn btn-primary">Action</button>
</div>

4. Tableau

Un tableau simple pour afficher des données :

Nom	Rôle	Statut
Akane	Admin	Actif
Thomas	Modérateur	Actif
Invité	Utilisateur	En attente

<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Rôle</th>
      <th>Statut</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Akane</td>
      <td>Admin</td>
      <td>Actif</td>
    </tr>
  </tbody>
</table>

5. Formulaire de contact

<form>
  <div class="form-group">
    <label for="nom">Nom</label>
    <input id="nom" type="text" />
  </div>
  <!-- etc. -->
</form>

6. Layout avec sidebar

Contenu principal

Cette zone représente le contenu principal de ta page. Tu peux y mettre du texte, des images, des cartes, etc.